<template>
	<el-collapse-item name="1" title="基本属性">
		<el-form
			:model="props"
			label-width="60px"
			label-position="left"
			size="small"
		>
			<el-form-item label="节点名称">
				<el-input v-model="props.options.name" :max-length="100" />
			</el-form-item>
			<el-form-item label="节点宽度">
				<el-input-number
					v-model="props.options.w"
					:min="1"
					:max="maxCols"
					@input="changeDomWidth"
				/>
				<span style="margin-left: 12px">共{{ maxCols }}列</span>
			</el-form-item>
			<el-slider
				v-model="props.options.w"
				:min="1"
				:max="maxCols"
				@change="changeDomWidth"
			/>
		</el-form>
	</el-collapse-item>
	<el-collapse-item name="2" title="其他属性"> </el-collapse-item>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useLayoutStore } from '@/store/modules/layout'
import { useTargetStore } from '@/store/modules/target'

defineOptions({ name: 'grid' })

const storeLayout = useLayoutStore()

const maxCols = computed(() => {
	const T =
		storeLayout.layoutType === 'PC'
			? 'lg'
			: storeLayout.layoutType === 'PAD'
			? 'sm'
			: 'xxs'
	return storeLayout.colNum[T]
})
const storeTarget = useTargetStore()
const timmer = ref(null)
const changeDomWidth = () => {
	// 输入框 input事件, 输入结束后0.5秒触发
	clearInterval(timmer.value)
	timmer.value = setInterval(() => {
		storeTarget.setOptions({ w: props.options.w })
		// 事件触发后,清除定时器
		clearInterval(timmer.value)
	}, 200)
}

const props = defineProps({
	options: {
		type: Object,
		default: () => ({})
	}
})
</script>
<style lang="scss" scoped>
:deep(.el-slider) {
	margin: 0 8px;
	width: calc(100% - 16px);
	.el-slider__button-wrapper {
		width: 16px;
		height: 16px;
		top: -7px;
	}
	.el-slider__button {
		width: 16px;
		height: 16px;
	}
}
</style>
